
angular.module('zixys.texture',[])
    
    .directive('textureTab',function(){
        return {
            restrict: 'C',
            replace: false,
            template:							
                    '<div id="zixys-texture-tab" ng-controller="textureCtrl">'+
                        '<div class="zixys-menu-block">'+
                            '<div class="zixys-input-box"><span class="zixys-menu-label">bg-color</span><input colorpick="bgColor" type="text"></div>'+
                            '<div class="zixys-input-box"><span class="zixys-menu-label">top</span><input class="zixys-spinner" ng-model="top" ng-disabled="posDisabled" type="text" ></div>'+
                            '<div class="zixys-input-box"><span class="zixys-menu-label">left</span><input class="zixys-spinner" ng-model="left" ng-disabled="posDisabled" type="text" ></div>'+
                        '</div>'+
                        '<div class="zixys-menu-block-xl">'+
                            '<div class="zixys-input-box"><span class="zixys-menu-label">path</span><input ng-model="path" ng-disabled="fileDisabled" type="text" class="zixys-xl"></div>'+
                            '<div class="zixys-texture-prev" style="background: url({{path}})"></div>'+
                        '</div>'+
                        '<div class="zixys-menu-block">'+
                            '<div class="zixys-input-box"><span class="zixys-menu-label">repeat</span><input ng-model="repeat" type="checkbox"></div>'+
                        '</div>'+
                        '<div class="zixys-template-action">'+
                            '<input type="button" value="Revert" />'+
                        '</div>'+								
                    '</div>',


            link: function($scope, element, attrs) {
                
            }
        }
    })
    
    .controller('textureCtrl',['$scope','style', 'Colors',function($scope, style, Colors){
        var element;
        
        function updateColor(element) {
            if(Colors.parseColor(element.css('background-color'))){
                $scope.bgColor = Colors.parseColor(element.css('background-color'));
            }
        }
        
        function resetForm() {
            $scope.posDisabled = true;
            $scope.fileDisabled = true;
            $scope.path = '';
            $scope.repeat = true;
            $scope.top = 0;
            $scope.left = 0;
            $scope.bgColor = {
                rgb : {
                    r:0,
                    g:0,
                    b:0
                },
                alpha : 100
            }
        }
        
        function setWatcher(newVal,oldVal) {
            if(newVal){
                draw();
            }
        }
        
        function draw() {
            if(!element) return;
            
            var css = 'background-color: rgba('+$scope.bgColor.rgb.r+','+$scope.bgColor.rgb.g+','+$scope.bgColor.rgb.b+','+($scope.bgColor.alpha/100)+');'+
                      'background-position: '+$scope.left+' '+$scope.top+';'+
                      'background-repeat: '+ ( $scope.repeat?'repeat':'no-repeat' ) +';';
            style.set(element,'background',css);
            
            if($scope.path){
                style.setBackgroundImage(element, 'url('+$scope.path+')');
            };
        }
        
        $scope.$on('selectElement',function(event,elem){
            resetForm();
            element = elem;
            $scope.fileDisabled = false;
            if($scope.repeat){
                $scope.posDisabled = true;
            }
            updateColor(element);
        });
        
        $scope.$watch('repeat',function(newVal){
            if(!$scope.fileDisabled){
                $scope.posDisabled = newVal;
            }
            draw();
        });

        $scope.$watch('bgColor',setWatcher,true);
        $scope.$watch('path',setWatcher);
        $scope.$watch('top',setWatcher);
        $scope.$watch('left',setWatcher);
        resetForm();
    }])

    .run(['$rootScope','$compile',function($rootScope, $compile){
        
        $rootScope.$on('zixysDomReady',function(event,params){
            $rootScope.addTab('Texture','texture-tab',$compile);
        });
        
    }]);
    
    